<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import {ElMessage} from "element-plus";

const centerDialogVisible = ref(false)


const data = reactive({
  user: {
    userId: '',
    username: '',
    addtime: '',
    realname: '',
    place: '',
    phone: '',
    birth: '',
    pwd: '',
    picture: '',
    balance: ''
  }
})

onMounted (() => {
  let localUser = localStorage.getItem('user')
  if (localUser) {
    let user = JSON.parse(localUser)
    data.user = user
  }
})



const balance = () => {

  const information = {
    balance: data.user.balance.value
  };

  console.log(information);
  // 获取余额信息
  axios.post('http://localhost:8080/users/balance', data.user).then(response => {
    console.log(response.data);
    if (response.data.code == '0') {
      ElMessage.success({
        message: '修改成功.',
        type: 'success',
        plain: true,
      })
      localStorage.setItem('user', JSON.stringify(data.user));
    }
  })
}
</script>

<template>
<h1 class="balance">您当前的余额为：<span class="balance-amount">{{ data.user.balance }}</span> 元</h1>

  <el-button class="recharge" plain @click="centerDialogVisible = true">充值</el-button>
  <el-dialog v-model="centerDialogVisible" title="Warning" width="500" center>
    <h1>
     扫描下面的二维码进行支付
    </h1>
    <img src="C:\Users\10616\IdeaProjects\sbb\src\assets\pay.jpg" class="picture">
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消支付</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          完成支付
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
  .balance{
    margin-left: 400px;
    margin-top:200px;
  }
  .recharge{
    position: absolute;
    margin-top:400px;
    margin-left:700px;
    width:120px;
    height:60px;
    background: linear-gradient(to right, #f8f9fa, #e2e6ea); /* 渐变色 */
    color: #555; /* 中灰色 */
  }
  .picture{
    width: 400px;
    height:400px;
  }
  .balance-amount {
    font-weight: bold;
    font-size: 50px;
    color: rgba(0, 100, 0, 0.6); /* 深绿色 */
  }
</style>